// lib/pages/article/article_list_page.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:blog_chyk/controllers/article_controller.dart';
import 'package:blog_chyk/models/article_model.dart';

class ArticleListPage extends StatelessWidget {
  const ArticleListPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 初始化控制器（全局单例，类似Vue的useStore）
    final ArticleController articleController = Get.put(ArticleController());

    return Scaffold(
      appBar: AppBar(title: const Text('文章列表')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        // Obx监听响应式数据变化，自动刷新列表（类似Vue的{{}}插值）
        child: Obx(() {
          // 数据加载完成前显示加载中
          if (articleController.articleList.isEmpty) {
            return const Center(child: CircularProgressIndicator());
          }

          // 渲染文章列表
          return ListView.builder(
            itemCount: articleController.articleList.length,
            itemBuilder: (context, index) {
              ArticleModel article = articleController.articleList[index];
              return Card(
                margin: const EdgeInsets.only(bottom: 16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      article.title,
                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 8.0),
                    Text(
                      '作者：${article.author}  |  日期：${article.date}',
                      style: Theme.of(
                        context,
                      ).textTheme.bodySmall?.copyWith(color: Colors.grey),
                    ),
                    const SizedBox(height: 12.0),
                    Text(article.content),
                  ],
                ),
              );
            },
          );
        }),
      ),
    );
  }
}
